<template>
  <div class="logo-container">
    <div v-if="collapse" class="logo">
      <el-avatar shape="square" :size="30" :src="squareUrl" />
    </div>
    <div class="logo-title" v-else>汇劳动</div>
  </div>
</template>

<script setup>
import squareUrl from "@/assets/img/layouts/vue.svg";
import { useFoldMenuStore } from "@/store/foldMenu";
import { storeToRefs } from "pinia";
const foldMenu = useFoldMenuStore();
const { collapse } = storeToRefs(foldMenu);
</script>

<style lang="scss" scoped>
.logo-container {
  .logo {
    background-color: rgba(36, 36, 36, 1);
    height: 56px;
    transition: all 1s;
    .el-avatar {
      margin: 0 auto;
      display: block;
      transform: translateY(50%);
      background-color: transparent;
    }
  }
  .logo-title {
    height: 56px;
    line-height: 56px;
    background: rgba(36, 36, 36, 1);
    font-size: 28px;
    font-weight: 400;
    letter-spacing: 0px;
    color: rgba(255, 255, 255, 1);
    font-family: "阿里妈妈数黑体";
    padding-left: 24px;
    transition: all 1s;
  }
}
</style>
